<template>
  <div>
    <head-top></head-top>
  </div>
  <div class="item_center">
    <div class="box_size item_center">
      <div style="width: 680px">
        <div style="padding: 10px 0">
          <div>
            <h3>
              {{ userPostInfoVO?.title }}
            </h3>
          </div>
          <div>
            <el-text size="small">
              播放量：{{ userPostInfoVO?.showCount }}
            </el-text>
            <el-text size="small">
              评论数量： {{ userPostInfoVO?.appraiseCount }}
            </el-text>
            <el-text size="small">
              创建时间：{{ getTimeByStr(userPostInfoVO?.createTime) }}
            </el-text>
            <el-text size="small">
              此处商品链接（可无）
            </el-text>
          </div>
        </div>
        <div>
          <el-image style="width: 660px" :src="$img+userPostInfoVO?.userpostsFiles[currentIndex]?.fileId"
                    v-if="isMimeType(userPostInfoVO?.userpostsFiles[currentIndex]?.type,'image/')"></el-image>
          <video controls width="660"
                 v-else-if="isMimeType(userPostInfoVO?.userpostsFiles[currentIndex]?.type,'video/')">
            <source :src="$video+userPostInfoVO?.userpostsFiles[currentIndex]?.fileId" type="video/webm"/>
            <source :src="$video+userPostInfoVO?.userpostsFiles[currentIndex]?.fileId" type="video/mp4"/>
          </video>
        </div>
        <div>
          <el-icon size="30">
            <el-image :src="require('@/assets/icon/dz.png')"></el-image>
          </el-icon>
          {{ userPostInfoVO?.likeCount }}
        </div>
        <div>
          <el-text>描述</el-text>
          <p style="margin-left: 20px">
            {{ userPostInfoVO?.description }}
          </p>
        </div>
        <div>
          此处评论列表
        </div>
      </div>
      <div style="padding: 20px;width: 300px">
        <div style="display: flex; align-items: center;justify-content: space-between">
          <el-avatar :src="$img+userPostInfoVO?.memberUser?.avatar" style="width: 40px"></el-avatar>
          &nbsp;&nbsp;
          <el-text>
            {{ userPostInfoVO?.memberUser?.userNickname }}
          </el-text>
        </div>
        <div>
          <el-button style="width: 100%" color="#098CC0" @click="AddFriend(userPostInfoVO?.memberUser?.id)" :disabled="isFriend(userPostInfoVO?.memberUser?.id)">添加好友</el-button>
        </div>
        <div class="item-back">
          <div>
            内容选集
          </div>
          <div v-for="(item,index) in userPostInfoVO?.userpostsFiles" @click="currentIndex=index" style="padding: 10px"
               :class="currentIndex===index ? 'item-li-act' :''">
            内容{{ index + 1 }}
          </div>
        </div>
        <div>
          <div v-for="item in userPostList" class="item_center" style="margin-bottom: 10px">
            <el-image style="width: 100px;height: 100px" :src="$img+item.coverId"></el-image>
            <div style="width: 200px;text-align: center">
              <el-text size="large" tag="Bold">
                {{item.title}}
              </el-text>
              <br>
              <el-text size="small">  {{item.description}}</el-text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import HeadTop from "@/components/home/HeadTop";
import {useRoute} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {getUserPostList, getUserPostsInfo} from '@/api/user'
import {createChatListItem, inspectIsFriend} from "@/api/chat";

const route = useRoute()
let userPostInfoVO = ref()
let currentIndex = ref(0)
let userPostList=ref([])

function getUserPostsInfoBYId() {
  getUserPostsInfo(route.query.postsId).then(res => {
    userPostInfoVO.value = res.data
    getUserPostList({pageNum:0,pageSize:5,userId:userPostInfoVO?.memberUser?.id,searchRange:'public'}).then(res2=>{
      userPostList.value=res2.data
    })
  })
}

let isFriend =computed(()=>{
 return async (friendId)=>{
  let res=await inspectIsFriend(friendId)
   return res.data
 }
})

let getTimeByStr = computed(() => {
  return (timeStr) => {
    const time = new Date(timeStr)
    return `${time.getFullYear()}-${time.getMonth()}-${time.getDay()}`
  }
})

let isMimeType = computed(() => {
  return (strType, mime) => {
    if (strType) {
      return strType.startsWith(mime)
    }
    return false;
  }
})

function AddFriend(friendId){
  createChatListItem({friendId})
}

onMounted(() => {
  getUserPostsInfoBYId()
})
</script>

<style scoped>
.item-back {
  background-color: #f1f2f3;
  margin-top: 10px;
  padding: 20px;
}

.item-li-act {
  background-color: #098CC0;
}
</style>
